// 监听屏幕宽度变化
import { storeToRefs } from "pinia";
import { mainStore } from "../store/index"
import { ref, watch, onMounted } from 'vue'

export default function (_width:any) {
    // 实例化仓库
    const store = mainStore();
    // 解构并使数据具有响应式
    const { phoneflag } = storeToRefs(store);
    //监听屏幕宽度变化
    const screenWidth = ref<number>(0)
    onMounted(() => {
        window.onresize = () => {
            return (() => {
                window.screenWidth = document.body.clientWidth
                screenWidth.value = window.screenWidth
            })()
        }
        window.screenWidth = document.body.clientWidth
        screenWidth.value = window.screenWidth
    })
    watch(screenWidth, (newValue) => {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        screenWidth.value = newValue
        // 打印screenWidth变化的值
        if (arguments[0]?screenWidth.value <= arguments[0]:screenWidth.value <= 750) {
            store.changePhoneFlag(true)
        } else store.changePhoneFlag(false)

    })
    return phoneflag
}
